<template>
  <div>
    <BackTo />
    <div class="container">
      <h1>达达外卖</h1>
      <nav>
        <p @click="currIndex = 0" :class="{ cur: currIndex == 0 }">短信登录</p>
        <p @click="currIndex = 1" :class="{ cur: currIndex == 1 }">密码登录</p>
      </nav>
      <div class="input_area" :class="{ curr: currIndex != 0 }">
        <input type="text" placeholder="手机号" v-model="phone" class="phone" />
        <span @click="getCode">获取验证码</span>
        <input type="text" v-model="code" placeholder="验证码" class="code" />
        <div class="prompt_area">
          温馨提示：未注册达达外卖账号的手机号， 登录时将自动注册，
          并且代表已同意 《<span @click="goUserAgreement">用户服务协议</span>》
        </div>
        <div class="button_area">
          <mt-button size="large" type="primary" @click.native="login"
            >登录</mt-button
          >
        </div>
        <div class="about-area">
          <router-link to="/about">关于我们</router-link>
        </div>
      </div>
      <div class="input_area" :class="{ curr: currIndex != 1 }">
        <input type="text" placeholder="手机号" v-model="phone" class="phone" />
        <input
          type="password"
          placeholder="密码"
          v-model="password"
          class="code"
        />
        <div class="prompt_area">
          温馨提示：未注册达达外卖账号的手机号， 登录时将自动注册，
          并且代表已同意 《<span @click="goUserAgreement">用户服务协议</span>》
        </div>
        <div class="button_area">
          <mt-button size="large" type="primary" @click.native="login"
            >登录</mt-button
          >
        </div>

        <div class="about-area">
          <router-link to="/about">关于我们</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from "mint-ui";
import { Toast } from "mint-ui";

import BackTo from "../../components/backTo/backTo.vue";
export default {
  data() {
    return {
      currIndex: 0,
      phone: "15832470630",
      code: "123456",
      password: "123456",
    };
  },

  components: { BackTo, Button },
  watch: {
    currIndex() {
      this.currIndex == 0 ? (this.password = "") : (this.password = "123456");
      this.currIndex == 1 ? (this.code = "") : (this.code = "123456");
    },
  },
  computed: {},

  methods: {
    getCode() {
      console.log("获取验证码");
    },
    goUserAgreement() {
      this.$router.push("/userAgreement");
    },
    login() {
      if (
        (this.currIndex == 0 &&
          this.phone == "15832470630" &&
          this.code == "123456") ||
        (this.currIndex == 1 &&
          this.phone == "15832470630" &&
          this.password == "123456")
      ) {
        Toast({
          message: "登录成功",
          position: "middle",
          duration: 2000,
        });
        this.$store.commit("setLogin", true);

        this.$router.back();
      } else {
        alert("登录失败");
      }
    },
  },
  mounted() {
    document.documentElement.style.backgroundColor = "#fff";
  },
  beforeDestroy() {
    document.documentElement.style.backgroundColor = "rgb(245, 245, 245)";
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
html
  background-color: #fff !important
.container
  h1
    color: rgb(0, 145, 111)
    text-align: center;
    font-size: 40px;
    margin: 40px 0;
  nav
    display: flex;
    justify-content: center
    p
      margin: 0;
      font-size:18px
      font-weight:bolder;
      margin: 0 20px;
      padding-bottom:5px
      border-bottom: 5px solid transparent;
      &.cur
        color :rgb(0, 145, 111)
        border-bottom: 5px solid rgb(0, 145, 111);
  .input_area
    width: 80%;
    margin: auto;
    margin-top: 15px
    position: relative;
    >span
      font-size:15px
      position: absolute;
      top:20px;
      right: 0px;
      color:#d4d3d3;
    input
      width: 100%
      border: 2px solid #f4f4f4;
      font-size:16px;
      padding: 15px 10px;
      outline: none
      color:#9a9a9a;
    .phone
      margin-bottom: 20px
    .prompt_area
      margin-top:20px;
      color: #000;
      font-size:13px;
      line-height: 1.4;
      font-weight: 900
      span
        color :rgb(0, 145, 111)
    .button_area
      margin-top: 30px
      button
        background-color: rgb(67, 197, 109)
        height: 35px;
        font-size:15px;
        font-weight: bolder
        letter-spacing: 5px;
    .about-area
      text-decoration: none
      font-size: 18px;
      text-align: center;
      margin-top: 20px
      color: #476a96
  .curr
    display: none
</style>
<style></style>
